<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <title>REBUILD</title>
    <style>
      html,
      body {
        background-color: #fff;
      }
      body {
        padding: 5px;
      }
      a {
        color: #404040;
      }
      a:hover {
        color: #404040;
        text-decoration: underline;
      }
      code {
        cursor: pointer;
      }
      code:hover {
        font-weight: bold;
      }
      .index {
        padding: 10px 0;
      }
      .index > a {
        display: inline-block;
        width: 150px;
      }
      .entities > div {
        padding: 8px 10px;
        color: #fff;
      }
      .entities > div > a {
        color: #fff;
      }
      .entities > div > .badge {
        border-color: rgba(255, 255, 255, 0.6);
        opacity: 0.8;
        border-radius: 99px;
        line-height: 1;
      }
      @media print {
        .container {
          margin: 0;
          padding: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="container" style="max-width: 100%">
      <h5 id="index" class="text-bold m-0 mt-3">INDEX</h5>
      <div class="index">
        <th:block th:each="e : ${entities}">
          <a th:text="${e[2]}" th:href="|#${e[0]}|"></a>
        </th:block>
      </div>

      <div class="entities" th:each="e : ${entities}">
        <div th:id="${e[0]}" class="bg-warning">
          <a th:text="${e[2]}" th:href="|../entity/${e[0]}/base|" target="_blank"></a>
          <span th:text="${e[0]}" class="badge ml-1" title="Internal Name"></span>
          <span th:text="${e[1]}" class="badge ml-1" title="Entity Code"></span>
          <a class="float-right font-weight-normal fs-12" href="#index">top</a>
        </div>
        <table class="table table-sm table-fixed table-hover">
          <thead>
            <tr>
              <th>Field Name</th>
              <th>Internal Name</th>
              <th>Type</th>
              <th>Reference</th>
              <th>Option</th>
              <th width="100" class="text-center">C/U/N/R</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="f : ${e[3]}">
              <td><a th:text="${f[0]}" th:href="|../entity/${e[0]}/field/${f[1]}|" target="_blank"></a></td>
              <td><code th:text="${f[1]}" title="Copy"></code></td>
              <td th:text="${f[2]}"></td>
              <td th:text="${f[3]}" class="ref"></td>
              <td th:text="${f[4]}" class="opt"></td>
              <td th:text="${f[5]}" class="text-center"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script th:src="@{/assets/lib/jquery.min.js?v=3.6.0}"></script>
    <script th:src="@{/assets/lib/clipboard.min.js}"></script>
    <script th:src="@{/assets/lib/react/babel.js?v=6.26.0}"></script>
    <script type="text/babel">
      $(document).ready(() => {
        $('table td.ref').each(function () {
          const $item = $(this)
          const ec = $item.text() || ''

          if (ec.startsWith('e:')) {
            const e = ec.substr(2)
            const text = $(`#${e} > a:eq(0)`).text() || e
            $item.html(`<a href="#${e}">${text}</a>`)
          } else if (ec.startsWith('c:')) {
            $item.text(ec.substr(2))
          }
        })

        $('table td.opt').each(function () {
          const $item = $(this)
          const opt = $item.text() || ''
          if (opt.length < 10) return

          const $ul = $('<ol class="pl-3 m-0"></ol>').appendTo($item.empty())
          $(opt.split('//')).each(function () {
            const o = this.split(':')
            $(`<li><span>${o[1]}</span> <code>${o[0]}</code></li>`).appendTo($ul)
          })
        })

        new ClipboardJS('code', {
          text: function (e) {
            return $(e).data('text') || $(e).text()
          },
        })
      })
    </script>
  </body>
</html>
